<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<style>
    header {
        height: 50px;
        font-size: 24px;
        font-family: 仿宋;
        display: flex;
        justify-content: center;
        align-items: center;
    }
</style>

<body>
    <!-- 为ECharts准备一个具备大小的Dom -->
    <div>
        <header>
            为您所推荐电影的图谱展示 :
        </header>
        <div>
            <div id="graph" style="width: 100%;height:600px;"></div>
        </div>
    </div>

</body>
<script src="/static/js/echarts.common.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@4.5.0/dist/echarts.min.js"></script>
<script>

    window.onload = function () {
        // 所要读取文件的路径所组成的数组
        const urls = ['./node.json', './links.json'];
        const doSth = async () => {
            // 通过promise.all遍历数组，通过fetch分别对每个路径进行请求
            const results = await Promise.all(urls.map(url => fetch(url).then(response => response.json())));

            // promise.all返回的是所有成功的结果所组成的数组
            let mydata = results[0];
            let links = results[1];

            // 获取所要操作的echarts的DOM
            var myChart = echarts.init(document.getElementById('graph'));

            // 图谱的配置项
            option = {
                // 提示框的配置
                tooltip: {
                    formatter: x => {
                        return [x.data.name];//设置提示框的内容和格式 节点和边都显示name属性
                    }
                },
                animationDurationUpdate: 5000,
                animationEasingUpdate: 'quarticlnOut', // quarticlnOut quinticInOut

                //图形上的文本标签，可用于说明图形的一些数据信息
                label: {
                    normal: {
                        show: true,
                        textStyle: {
                            fontSize: 12
                        },
                    }
                },
                legend: {
                    x: "center",
                    show: true
                },
                series: [
                    {
                        type: 'graph',// 类型:关系图
                        layout: 'force',//图的布局，类型为力导图
                        symbolSize: 65,//节点大小
                        focusNodeAdjacency: true,//当鼠标移动到节点上，突出显示节点以及节点的边和邻接节点
                        draggable: true,//指示节点是否可以拖动
                        roam: true,
                        edgeSymbol: ['none', 'arrow'],
                        categories: [{
                            name: '电影',
                            itemStyle: {
                                normal: {
                                    color: "lightgreen"
                                }
                            }
                        }, {
                            name: '主演',
                            itemStyle: {
                                normal: {
                                    color: "orange",
                                }
                            }
                        }, {
                            name: '类型',
                            itemStyle: {
                                normal: {
                                    color: "pink",
                                }
                            }
                        }, {
                            name: '导演',
                            itemStyle: {
                                normal: {
                                    color: "lightblue",
                                }
                            }
                        }],
                        label: {
                            normal: {
                                show: true,
                                textStyle: {
                                    fontSize: 12,
                                    color: "black",
                                },
                            }
                        },
                        force: {
                            repulsion: 4000,//节点之间的斥力因子。支持数组表达斥力范围，值越大斥力越大。
                            edgeLength: 80,//边的两个节点之间的距离
                            gravity: 0.1, //节点受到的向中心的引力因子。该值越大节点越往中心点靠拢。
                        },
                        edgeSymbolSize: [4, 50], // 边两端的标记大小，可以是一个数组分别指定两端，也可以是单个统一指定。
                        edgeLabel: {
                            normal: {
                                show: true,
                                textStyle: {
                                    fontSize: 10
                                },
                                formatter: "{c}"
                            }
                        },
                        data: mydata,
                        links: links,
                        lineStyle: {
                            normal: {
                                opacity: 0.9,
                                width: 1.1,
                                curveness: 0,
                                color: "#262626",
                            }
                        }
                    }
                ]
            };

            //节点自定义拖拽不回弹
            myChart.on('mouseup', function (params) {
                var op = myChart.getOption();
                op.series[0].data[params.dataIndex].x = params.event.offsetX;
                op.series[0].data[params.dataIndex].y = params.event.offsetY;
                op.series[0].data[params.dataIndex].fixed = true;
                myChart.setOption(op);
            });

            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        }
        doSth();
    }


</script>

</html>